@use "sass:math";
@import "../../../scss/plugin";

.edit-category-selector{
  @include border-radius($radius-pc);
  padding: 20px;
  background-color: white;
  border: 1px solid $color-border;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  .category-wrapper{
    width: 20%;
    padding: 4px 2px;
    &:hover{
      .category{
        background-color: $bg-light;
      }
    }
    @include transition(background-color  0.2s);

    .category{
      @include transition(background-color  0.1s);
      white-space: nowrap;
      @extend .unselectable;
      @include border-radius(5px);
      padding: 5px;
      flex-shrink: 0;
      display: block;
      font-weight: bold;
      cursor: pointer;
      font-size: $fz-label;
      text-align: center;
    }
  }
}

@media (min-width: $grid-separate-width-max){
  .edit-category-selector {
    @include border-radius($radius-pc);
    .category-wrapper{
      .category{
      }
    }
  }
}


// MAX
@media (min-width: $grid-separate-width-big) and (max-width: $grid-separate-width-max) {
  .edit-category-selector{
    @include border-radius($radius-pc);
    .category-wrapper{
      .category{
      }
    }
  }
}

// IPAD
@media (min-width: $grid-separate-width-md) and (max-width: $grid-separate-width-big) {
  .edit-category-selector{
    @include border-radius($radius-pc);
    .category-wrapper{
      width: 100px;
      .category{
      }
    }
  }
}

@media (min-width: $grid-separate-width-sm) and (max-width: $grid-separate-width-md) {
  .edit-category-selector{
    //@include border-radius(0)
  }
}

// MOBILE
@media (max-width: $grid-separate-width-sm) {
  .edit-category-selector{
    //@include border-radius(0)
  }
}


// DARK
@media (prefers-color-scheme: dark) {
  .edit-category-selector{
    border-color: $dark-border;
    background-color: $dark-bg-dark;
    border-bottom-color: $dark-border;
    .category-wrapper {
      &:hover{
        .category{
          background-color: $dark-bg;
        }
      }
    }
  }
}
